<!--分页的组件-->
<template>
	<div class="pages">
		<ul>
			<li class="first"><a href="javascript:void(0);" @click="first">首页</a></li>
			<li class="prev"><a href="javascript:void(0);"  @click="prev"><img src="../assets/prev_icon.png" /></a></li>
			<li class="page_item page_item_more" v-if="showPrevMore"><span>……</span></li>
			<!--<li class="page_item active"><a href="#">1</a></li>-->
			<li :class="['page_item',{'active':index===pager}]" v-for="pager in pagers"><a href="javascript:void(0);" @click="go(pager)">{{pager}}</a></li>
			<!--<li class="page_item"><a href="#">3</a></li>
			<li class="page_item"><a href="#">4</a></li>
			<li class="page_item"><a href="#">5</a></li>-->
			<li class="page_item page_item_more" v-if="showNextMore"><span>……</span></li>
			<li class="next"><a href="javascript:void(0);" @click="next"><img src="../assets/next_icon.png" /></a></li>
			<li class="last"><a href="javascript:void(0);" @click="last">末页</a></li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:"moPages",
		props:{
			perPages:{
				//页面中可见页码，其他以……代替
				type:Number,
				default:5
			},
			pageIndex:{
				//当前页码
				type:Number,
				default:1
			},
			pageSize:{
				//每页显示条数
				type:Number,
				default:10
			},
			total:{
				//总的条数
				//type:String,
				default:0
			}
		},
		data(){
			return {
				index:this.pageIndex,//当前页码
				limit:this.pageSize,//每页显示的条数
				size:this.total || 0,//总条数
				showPrevMore:false,//是否显示前面的……
				showNextMore:false//是否显示后面的……
			}
		},
		watch:{
			pageIndex(val){
				this.index=val || 1;
			},
			pageSize(val){
				this.limit=val || 10;
			},
			total(val){
				this.size=val || 0;
			}
		},
		computed:{
			//计算
			pages(){
				//计算总页数
				return Math.ceil(this.size /this.limit);
			},
			pagers(){
				//计算要显示的页码
				const array=[]
				const perPages=this.perPages; //要显示在页面的页面数目
				const pageCount =this.pages ;//总的页数
				let current =this.index; //当前页
				const _offset=(perPages-1)/2 ;//中间页码值
				const offset={
					start:current - _offset,//开始值
					end : current + _offset//结束值
				}
				if(offset.start<1){
					offset.end = offset.end +(1-offset.start)
					offset.start=1
				}
				if(offset.end>pageCount){
					offset.start = offset.start - (offset.end-pageCount)
					offset.end=pageCount;
				}
				if(offset.start<1){
					offset.start=1;
				}
				this.showPrevMore=(offset.start>1)
				this.showNextMore=(offset.end < pageCount)
				for(let i=offset.start; i<=offset.end;i++){
					array.push(i)
				}
				return array;
			}
		},
		methods:{
			prev(){
				if(this.index >1){
					this.go(this.index -1)
				}
			},
			next(){
				if(this.index<this.pages){
					this.go(this.index + 1)
				}
			},
			first(){
				if(this.index !==1){
					this.go(1)
				}
			},
			last(){
				if(this.index !=this.pages){
					this.go(this.pages)
				}
			},
			go(page){
				if(this.index !==page){
					this.index =page;
					this.$emit('change',this.index)
				}
			}
		}
	}
</script>

<style scoped>
	/*分页的样式*/
	.pages{
		width:90%;
		border-bottom: 1px solid #dee0e3;
		margin: 0px auto;
		padding:13px 24px;
		text-align: center;
		font-size: 0px;
		line-height: 0px;
	}
	.pages ul{
		overflow: hidden;
		display: inline-block;
	}
	.pages li{
		float: left;
		font-size: 14px;
		color:#666666;
		line-height:2rem;
		width:2rem;
		height: 2rem;
		overflow: hidden;
		text-align: center;
	}
	.pages li.first,.pages li.last{
		width:auto;
		padding: 0px 5px;
	} 
	.pages li a{
		display: block;
	}
	.pages li a:hover{
		color:#624279;
	}
	.pages li a img{
		vertical-align: middle;
	}
	.pages .page_item{
		border-radius: 50%;
	}
	.pages .page_item.active{
		background: #624279;
		
	}
	.pages .page_item.active a{
		color:#fff;
	}
	@media only screen and (min-width: 320px) and (max-width:768px) {
		.pages{
			width:100%;
			padding:13px 0px;
		}
	}
</style>